<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-input
          style="width: 300px"
          placeholder="请输入搜索关键字"
          size="small"
          class="m-r-10"
          clearable=""
          v-model="search.queryWord"
          @change="query"
        />
      </el-col>
      <el-col :span="12">
        <div class="flex-end">
          <el-button
            style="margin-right: 10px"
            v-if="!permission['filling-team:driver-add']"
            class="m-r-10"
            size="small"
            type="primary"
            plain
            @click="addNew"
          >
            新增加注卡
          </el-button>
          <el-upload
            style="margin-right: 10px"
            v-if="!permission['filling-team:driver-upload']"
            :action="'/api/uic-system/fillteamuser/import/' + id"
            :limit="1"
            :show-file-list="false"
            :on-success="handleSuccess"
            :headers="headerObj"
          >
            <el-button size="small" type="primary" plain> 批量导入 </el-button>
          </el-upload>
          <el-button
            v-if="!permission['filling-team:driver-download']"
            style="margin-left: -5px; font-size: 12px !important"
            icon="el-icon-download"
            size="small"
            type="text"
            @click="download"
          >
            下载加注卡信息模板
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-table
      class="my-table m-t-10"
      :data="data"
      v-loading="loading"
      style="width: 100%"
      border
      :header-cell-style="{ background: '#eee', color: '#000' }"
    >
      <el-table-column type="index" align="center" label="序号" width="60" />
      <el-table-column
        prop="cardNo"
        align="center"
        label="加注卡号"
        min-width="100"
      />
      <el-table-column
        label="卡密码"
        align="center"
        min-width="100"
        prop="cardPwd"
      >
        <template v-slot="scope">
          {{ scope.row.cardPwd | defaultValue }}
        </template>
      </el-table-column>
      <el-table-column label="月额度使用上限（元）" width="180" align="center">
        <template v-slot="scope">
          {{ scope.row.creditMoney | defaultValue }}
        </template>
      </el-table-column>
      <el-table-column
        prop="cardDesc"
        align="center"
        label="备注"
        min-width="100"
      />
      <el-table-column
        prop="cardStatus"
        align="center"
        label="卡状态"
        min-width="100"
      >
        <template v-slot="scope">
          <span v-if="scope.row.cardStatus == 0">未绑定</span>
          <span v-if="scope.row.cardStatus == 1">正常</span>
          <span v-if="scope.row.cardStatus == 2">停用</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="150">
        <template v-slot="scope">
          <el-dropdown @command="handleCommand">
            <div class="el-dropdown-link">
              操作列表
              <i class="el-icon-arrow-down el-icon--right"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-if="!permission['filling-team:view-addcard']"
                :command="{
                  c: 'view-addcard',
                  v: scope.row,
                }"
              >
                查看
              </el-dropdown-item>
              <el-dropdown-item
                v-if="
                  permission['filling-team:enable'] &&
                  scope.row.cardStatus !== 0
                "
                :command="{
                  c: 'enable',
                  v: scope.row,
                }"
              >
                启用
              </el-dropdown-item>
              <el-dropdown-item
                v-if="!permission['filling-team:month-set']"
                :command="{
                  c: 'month-set',
                  v: scope.row,
                }"
              >
                月额度设置
              </el-dropdown-item>
              <el-dropdown-item
                v-if="permission['filling-team:delete']"
                :command="{
                  c: 'delete',
                  v: scope.row,
                }"
              >
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <app-pagination
      ref="paginationRef"
      :total="total"
      :page-size="page.size"
      class="m-t-20"
      @change="pageChange"
    />
    <el-dialog
      :title="type === 'view' ? '查看加注卡' : '新增加注卡'"
      append-to-body
      :visible.sync="showAddNewFlag"
      width="600px"
    >
      <el-form
        class="pa-12"
        :model="addForm"
        :rules="addRules"
        ref="addFormRef"
        label-width="130px"
      >
        <el-form-item label="加注卡号" prop="cardNo">
          <el-input v-model="addForm.cardNo"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="cardPwd">
          <el-input v-model="addForm.cardPwd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="cardDesc">
          <el-input v-model="addForm.cardDesc"></el-input>
        </el-form-item>
      </el-form>
      <div class="dividing-line m-t-20 m-b-20"></div>
      <div class="flex-end">
        <el-button
          v-if="type === 'add'"
          type="primary"
          plain
          size="small"
          @click="showAddNewFlag = false"
        >
          取消
        </el-button>
        <el-button
          v-if="type === 'add'"
          type="primary"
          size="small"
          :loading="saveLoading"
          @click="confirmAdd"
        >
          保存
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="月额度设置"
      append-to-body
      :visible.sync="settingCardDialog"
      width="400px"
    >
      <el-form
        class="pa-12"
        :model="settingForm"
        ref="settingFormRef"
        label-width="130px"
      >
        <el-form-item label="月额度设置" prop="cardNo">
          <el-input v-model="settingForm.creditMoney"></el-input>
        </el-form-item>
      </el-form>
      <div class="dividing-line m-t-20 m-b-20"></div>
      <div class="flex-end">
        <el-button
          type="primary"
          plain
          size="small"
          @click="settingCardDialog = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="confirmSettingcreditMoney"
          :loading="carLoading"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import AppPagination from "@/components/business/app-pagination";
import {
  confirmWarning,
  downLoadFile,
  getRecords,
  getRespData,
  getTotal,
  msgError,
  msgSuccess,
  strEquals,
} from "@/util/common-util";
import {
  getPage,
  save,
  monthlyLimitSetting,
  removeTeamcard as remove,
  updateStatus,
} from "@/api/business/filling-team-car-driver";
import SelectFillingElectronicCardButton from "@/components/business/select-filling-electronic-card-button";
import SelectFillingCarButton from "@/components/business/select-filling-car-button";
import { getToken } from "@/util/auth";
import SelectFillingTeamUserButton from "@/components/business/select-filling-team-user-button.vue";

export default {
  name: "contract-customer-add-card-tab",
  components: {
    SelectFillingTeamUserButton,
    SelectFillingCarButton,
    SelectFillingElectronicCardButton,
    AppPagination,
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  props: ["id"],
  data() {
    return {
      settingForm: {},
      settingCardDialog: false,
      headerObj: { "Uic-Auth": "bearer " + getToken() },
      loading: false,
      showAddNewFlag: false,
      showEditFlag: false,
      showBindVehicleFlag: false,
      showBindElectronicCardFlag: false,
      showSelectVehicleFlag: false,
      showSelectElectronicCardFlag: false,
      addForm: {
        userName: "",
        userPhone: "",
        teamId: "",
      },

      saveLoading: false,
      removeLoading: false,
      editLoading: false,
      cardLoading: false,
      carLoading: false,

      data: [],
      search: {
        teamId: "",
        queryWord: "",
      },
      page: {
        size: 20,
        current: 1,
      },
      total: 0,
      currRow: {},
      type: "",
    };
  },
  created() {
    this.search.teamId = this.id;
    this.query();
  },
  methods: {
    handleCommand(_command) {
      const row = _command.v;
      if (strEquals(_command.c, "view-addcard")) {
        this.showAddNewFlag = true;
        this.addForm = row;
        this.type = "view";
      }
      if (strEquals(_command.c, "enable")) {
        confirmWarning("启用操作", `确定启用此加注卡 ？`, () => {
          row.cardStatus = 1;
          updateStatus(row).then((res) => {
            msgSuccess();
          });
        });
      }
      if (strEquals(_command.c, "delete")) {
        confirmWarning("删除", `确定删除此加注卡 ？`, () => {
          remove(row.id).then((res) => {
            msgSuccess();
            this.query();
          });
        });
      }
      if (strEquals(_command.c, "month-set")) {
        this.settingForm = row;
        this.settingCardDialog = true;
      }
    },
    handleSuccess() {
      msgSuccess("上传成功");
    },
    query() {
      this.loading = true;
      getPage(this.page, this.search)
        .then((res) => {
          this.data = getRecords(res);
          this.total = getTotal(res);
          this.loading = false;
        })
        .then(() => {
          this.loading = false;
        });
    },
    addNew() {
      this.type = "add";
      this.addForm = {
        userName: "",
        userPhone: "",
        teamId: "",
      };
      this.showAddNewFlag = true;
    },
    confirmAdd() {
      this.addForm.teamId = this.id;
      this.$refs.addFormRef.validate((valid, errObj) => {
        if (valid) {
          this.saveLoading = true;
          save(this.addForm)
            .then((res) => {
              msgSuccess();
              this.query();
              this.showAddNewFlag = false;
              this.saveLoading = false;
            })
            .catch(() => {
              this.saveLoading = false;
            });
        }
      });
    },
    confirmSettingcreditMoney() {
      this.settingForm.teamId = this.id;
      this.$refs.settingFormRef.validate((valid, errObj) => {
        if (valid) {
          this.saveLoading = true;
          monthlyLimitSetting(this.settingForm)
            .then((res) => {
              msgSuccess();
              this.query();
              this.settingCardDialog = false;
              this.saveLoading = false;
            })
            .catch(() => {
              this.saveLoading = false;
            });
        }
      });
    },
    pageChange(_page) {
      this.page = _page;
      this.query();
    },
    async download() {
      await downLoadFile(
        "/api/uic-system/fillteamuser/export-template",
        "司机信息模板.xls"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>
